<script setup lang="ts">
import { ref } from 'vue'
import MerchantExamine from '../views/MerchantExamine.vue'
import MerchantManager from '../views/MerchantManager.vue'
import {useLoginStore} from '../store/useLoginStore'
import router from '../router/index'


const activeIndex = ref('1')
const loginStore = useLoginStore()
console.log(loginStore)
const handleSelect = (index: string) => {
  router.push(index)
}
</script>

<template>
   <div class="common-layout">
    <el-container>
     <el-header style="text-align: right;">
      <div>
       <font>欢迎用户{{loginStore.username}}</font>
      </div>
     </el-header>
     <el-container>
      <el-aside width="150px">
       <el-menu :default-active="activeIndex" @select="handleSelect">
        <el-menu-item index="/MerchantExamine">商家审核</el-menu-item>
        <el-menu-item index="/MerchantManager">商家管理</el-menu-item>
       </el-menu>
      </el-aside>
      <el-main>
       <div>
        <router-view></router-view>
       </div>
      </el-main>
     </el-container>
    </el-container>
   </div>
</template>

<style scoped>
.el-header {
   background-color: rgb(98, 114, 120);
}

.el-aside {
   background-color: rgb(98, 114, 120);
   height: 100vh;
}

.el-menu-item.is-active {
   background-color: rgb(98, 114, 120);/* 激活时的背景颜色 */
   color: white; /* 激活时的文字颜色 */
}

</style>